<template>
  <div class="full">
    <div v-for="(v, k) in classes" class="item h35px flex justify-between items-center cursor-pointer" @click="choose(k)">
      <div>{{ k }}</div>
      <div>{{ v }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { closePopupKey } from '@/components/Popup';
  import { inject } from 'vue';
  import { classes } from '..';
  
  const emits = defineEmits(['choose'])

  const close = inject<() => void>(closePopupKey, void 0)

  function choose(k) {
    emits('choose', k)
    close?.()
  }
</script>
<style lang="less" scoped>
  .item:hover {
    background-color: var(--el-color-primary);
    color: #FFF;
  }
</style>